let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
/**
 * 需求1：将模拟后台给的数据渲染到api分类中
 * 分析：
 *  数组中的每个对象，对应页面上的一个a标签
 *  对象的name属性：是a标签中的文本数据
 *  对象的keyword属性：对应的a标签被点击之后，需要在下面的input框中展示的内容
 *  对象的isnew属性，对应是页面中的a标签的文本是否加粗
 * 
 * 实现：遍历数组，取出每个对象，将对象转成对应的a标签
 */

// 需要定一个变量，用于拼接页面需要的html片段
let aHtml = ""
// 遍历数组
apiTypeData.forEach(function (v) {
    // 取出数组中的每个对象，拼接a标签
    if (v.isnew === true) {
        // 需要给a标签上添加一个自定义属性，目的是在点击的时候可以获取对应的数据展示
        aHtml = aHtml + `<a href="#" class='api-link' keyword="${v.keyword}" >${v.name}</a>`
    } else {
        aHtml = aHtml + `<a href="#"  keyword="${v.keyword}">${v.name}</a>`
    }
    // aHtml = aHtml + `<a href="#"  keyword="${v.keyword}" class='${v.isnew ? "api-link" : ""}'>${v.name}</a>`
})
// 拼接完成之后，需要将html添加到页面上
let links = document.querySelector(".api-category-links")
links.innerHTML = aHtml

/**
 * 需求2：点击api分类的每个a标签，需要在下面的input中的切换显示的内容
 */
// 获取到api分类中的所有按钮（a标签）
let btns = document.querySelectorAll(".api-category-links a")
// 遍历所有的按钮（a标签）
btns.forEach(function (v) {
    // 绑定事件
    v.addEventListener("click", function () {
        // 获取标签上的keyword属性值,需要放到页面的input中
        let input = document.querySelector(".api-input input")
        input.placeholder = this.getAttribute("keyword")
        // 获取标签之间的文本数据
        let strong = document.querySelector(".api-search strong")
        strong.innerText = this.textContent
    })
})

let listDataArr = [
    //第一行
    { img: "../img/API_01.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "../img/API_01.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "../img/api03.svg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "../img/api05.svg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    { img: "../img/api02.svg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第二行
    { img: "../img/api01.svg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "../img/api01.svg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "../img/api01.svg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "../img/api01.svg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "../img/api01.svg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "../img/api01.svg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "../img/api01.svg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "../img/api01.svg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "../img/api01.svg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "../img/api01.svg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "../img/api01.svg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "../img/api01.svg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "../img/api01.svg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "../img/api01.svg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "../img/api01.svg.", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
/**
 * 需求3：根据模拟的后台 api列表的数据，需要在页面上渲染出每个api列表
 */
let listHtml = ""
// 遍历数组
listDataArr.forEach(function (v) {
    // 拼接html片段
    listHtml += `<li class="fl api-item">
        <span class="${v.isSpecial === true ? 'company-money' : 'company-free'}">企业专用</span>
        <a href="#" class="api-detail">
            <img src="../imgs/${v.img}" alt="">
            <p>${v.name}</p>
            <span class="${v.isSpecial ? 'money' : 'free'}">${v.price}</span>
        </a>
        <button class="api-apply">申请数据</button>
    </li>`
})
// console.log(listHtml);
// 将拼接好的html片段，渲染到 ul中
let ul = document.querySelector(".api-list")
ul.innerHTML = listHtml


/**
 * 需求4: 点击申请 按钮的时候弹出窗口，需要给按钮上注册点击事件
 *  按钮比较多，获取按钮，循环绑定事件，效率太低，可以借助事件委派的方式
 */
let win = document.querySelector(".win")
// let applyBtn = document.querySelectorAll(".api-apply")
// console.log(applyBtn);
// 将事件绑定的ul上面，通过事件冒泡的方式解决
ul.addEventListener("click", function (e) {
    // console.log(e.target);
    // 判断用户点击的是哪个标签，这里需要的是点击到button按钮
    if (e.target.className === "api-apply") {
        win.style.display = "block"
    }
})


/**
 * 需求5：点击页面的遮罩层，隐藏弹窗，点击弹窗中的其他任何位置，都不会触发隐藏
 */

win.addEventListener("click", function (e) {
    if (e.target.className === "win") {
        e.target.style.display = "none"
    }
})

/**
 * 需求6：点击弹窗中的 账号登录  或者  扫码登录 按钮，切换登录方式的div，
 * 在页面布局的时候，给出两个不同的css类名，就可以实现切换
 * 需要通过js控制这里两个类名即可
 */
let loginBtns = document.querySelectorAll(".login-btns a")
let loginDiv = document.querySelectorAll(".login-form .login-div")
// 循环遍历
loginBtns.forEach(function (v, i) {
    v.addEventListener("click", function () {
        // 使用循环全部清除，然后再添加
        for (let x = 0; x < loginBtns.length; x++) {
            loginBtns[x].className = ""
            loginDiv[x].classList.remove("login-active")
        }
        this.className = "active"
        loginDiv[i].classList.add("login-active")
    })
})

